<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let texts = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正"];
      window.addEventListener("click", (e) => {
        // console.log(e.clientX, e.clientY);

        let span = document.createElement("span");

        let index = random(0, texts.length - 1);
        // span.innerText = texts[index];
        span.innerText = "♥";

        let size = 30;

        span.style = `position:absolute; left: ${e.clientX - size / 2}px; top:${
          e.clientY - size / 2
        }px; color:${color()}; font-size:${size}px; opacity:1`;

        document.body.appendChild(span);
        setInterval(() => {
          let top = span.style.top.replace("px", "");
          span.style.top = parseInt(top) - 2 + "px";
          span.style.opacity = span.style.opacity - 0.1;
          if (span.style.opacity <= 0) {
            span.remove();
          }
        }, 200);
      });

      function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function color() {
        return `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;
      }
    </script>
  </body>
</html>
